<script lang="ts" setup>
import { onUnmounted } from 'vue'
import TheMenu from "./TheMenu.vue"
import TheTabbar from './TheTabbar.vue';
import {useUserStore} from '@/stores/user';
import { useSettingStore } from '@/stores/setting';
const settingStore = useSettingStore();
const userStore = useUserStore();

import { useRouter } from 'vue-router';
const router = useRouter();
import emitter from '@/utils/emitter';

emitter.on('change-route', (res: any) => {
    router.replace({//" mainCourse", item.cid
        name: res.routeName as string,
        query: {
            cid: res.cid as number
        }
    });
});
import { ElMessage } from "element-plus";
import { useCourseStore } from '@/stores/course';
import { getCourseList } from '@/api/course';
//获取课程信息存入仓库，新建课程的时候要调用刷新
emitter.on("refresh-course", async () => {
    const CourseStore = useCourseStore();
    let result = await getCourseList();
    if (result) {
        console.log(result.data);
        CourseStore.setCourseInfo(result.data)
    } else {
        ElMessage.error("课程信息未更新");
        console.log("课程信息未更新");
        // }
        window.location.reload();
    }
});
onUnmounted(() => {
    emitter.off('change-route');
    emitter.off('refresh-course');
})
</script>
<template>
    <div class="layout">
        <el-container style="height: 100vh;">
            <el-aside class="aside" :class="{ fold: settingStore.fold ? true : false }">
                <div class="logo" v-show="!settingStore.fold">
                    <el-image class="el-img" :src="userStore.userInfo.avatar" fit="cover"></el-image>
                    <p style="margin-left: 5px;color: white;">{{ userStore.userInfo.role ? userStore.userInfo.role :
                "who" }}</p>
                    <p style="margin-left: 5px;color: white;">{{ userStore.userInfo.username ?
                userStore.userInfo.username : "Login"
                        }}
                    </p>
                </div>
                <!-- 滚动条 -->
                <el-scrollbar class="scrollbar">
                    <el-menu router :default-active="$route.path" background-color="#001529" text-color="white"
                        :collapse="settingStore.fold">
                        <!-- 根据路由动态生成菜单 -->
                        <TheMenu :menuList="settingStore.menuRoutes " />
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-container>
                <el-header style="font-size: 12px; height: 60px;">
                    <TheTabbar />
                </el-header>
                <el-scrollbar>
                    <el-main style="flex: 1;">
                        <RouterView />
                    </el-main>
                </el-scrollbar>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped>
.el-scrollbar {
    padding: 0%;
    margin: 0%;
    /* background-color: #001529; */

    .el-main {
        padding: 0%;
        margin: 0%;
    }
}

.aside {
    padding-top: 20px;
    width: 260px;
    background-color: #001529;
    transition: all 0.03s;

    &.fold {
        width: 70px;
    }

    .logo {
        display: flex;
        height: 60px;
        align-items: center;
        justify-content: center;


        .el-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }

    .scrollbar {
        width: 100%;
        height: calc(100vh - 60px - 2*20px);

        .el-menu {
            border-right: none;
        }
    }


}
</style>
